<template>
  <view class="goods-introduce" :style="[goodsIntroduceCss]">
    <!-- 拼团展示价格  -->
    <view
      v-if="goodsInfo.pt_activity && is_pt"
      class="pt-price-box"
      :style="{
        background: `url(${asyncImgs.pintuan.goods_price_bg}) center / cover no-repeat`
      }"
    >
      <div class="price">
        ￥
        <text style="font-size: 56rpx">{{
          goodsInfo.pt_activity.pt_price | priceBeforeZero
        }}</text>
        <text>{{ goodsInfo.pt_activity.pt_price | priceAfterZero }}</text>
        <text
          class="u-m-l-10 u-font-24 font-w-400 font-del"
          v-if="showOriginPrice && parseFloat(goodsInfo.original_price)"
        >
          {{ goodsInfo.original_price }}
        </text>
      </div>
      <div class="sales-num">已拼{{ goodsInfo.pt_activity.sale_num }}份</div>
    </view>
    <template v-if="!goodsInfo.seckill_activity_arr">
      <view :style="[moduleBgCss]" class="module-bg"></view>
      <view class="introduce-section" v-if="goodsInfo.is_queue == 0">
        <!-- 非拼团正常展示商品价格 -->
        <view
          v-if="!goodsInfo.pt_activity && !goodsInfo.activityWechatRoom"
          class="introduce-header"
        >
          <!-- 不是排队免单商品  is_queue 0-->
          <view class="price-section">
            <view class="price-box">
              <view class="price" v-if="!goodsInfo.is_negotiable">
                <text>¥</text>
                <text>{{ goodsInfo.min_price | priceBeforeZero }}</text>
                <text>{{ goodsInfo.min_price | priceAfterZero }}</text>
              </view>
              <view class="price" v-else>
                <text></text>
                <text>{{ $t("diy.negotiable") }}</text>
                <text></text>
              </view>
              <view
                v-if="showMemberPrice && goodsInfo.is_level"
                class="origin-price"
              >
                <span>¥{{ goodsInfo.min_member_price }}</span>
                <image
                  class="member-price-img"
                  :src="asyncImgs.goods.vipicon"
                />
              </view>
              <view
                v-if="showOriginPrice && parseFloat(goodsInfo.original_price)"
                class="old-price"
                >¥{{ goodsInfo.original_price }}</view
              >
            </view>

            <view class="flex">
              <view class="integral-box" v-if="goodsInfo.integral.give">
                赠送{{ goodsInfo.integral.give }}积分
              </view>
              <view class="integral-box" v-if="goodsInfo.confine_count">
                限购{{ goodsInfo.confine_count }}件
              </view>
              <view class="integral-box" v-if="goodsInfo.integral.forehead">
                积分最多抵扣{{ goodsInfo.integral.forehead }}元
              </view>
              <view
                class="integral-box"
                v-if="goodsInfo.rebate && propsData.params.showFenxiao"
              >
                分销最高可赚{{ goodsInfo.rebate }}元
              </view>
              <view
                class="integral-box"
                v-if="goodsInfo.activityOrderRebateSelf"
              >
                返利赠送比例{{ goodsInfo.activityOrderRebateSelf.send_num }}%
              </view>
            </view>
          </view>
          <view class="share-section">
            <p class="sale-num">
              {{ $t("goods.count") }}
              {{
                (goodsInfo.cutGoods
                  ? parseInt(goodsInfo.cutGoods.virtual_sales || 0) +
                    parseInt(goodsInfo.sales || 0)
                  : goodsInfo.sales || 0) +
                " " +
                goodsInfo.unit
              }}
            </p>
          </view>
        </view>
        <view
          class="levelBox"
          v-if="showMemberPrice && goodsInfo.next_level"
          @click="$utils.toUrl('/user/member/member_center')"
        >
          <image
            class="levelBg"
            :src="asyncImgs.goods.goods0"
            mode="widthFix"
          ></image>
          <view class="levelBoxCon">
            <view class="let">
              <image :src="asyncImgs.goods.goods1" mode="widthFix"></image>
              <!-- <view class="num">{{ goodsInfo.next_level.name }}</view>
						      <view class="num num1">会员价</view>
						      <view class="num">￥{{ goodsInfo.next_level.goods_price }}</view> -->
              <view class="num">开通{{ goodsInfo.next_level.name }}会员,</view>
              <view class="num num1">预计省</view>
              <view class="num" style="margin-left: 10rpx; color: #f8260a">
                {{ goodsInfo.next_level.diff_price || "0.00" }}元</view
              >
            </view>
            <view class="rig">
              <view class="num">立即开通</view>
              <image :src="asyncImgs.goods.goods2" mode="widthFix"></image>
            </view>
          </view>
        </view>

        <!-- <view class="goods-virtues" v-if="goodsInfo.service_list.length">
						  <view
						    class="goods-virtues-item"
						    v-for="(item, index) in goodsInfo.service_list"
						    :key="index"
						  >
						    <span></span>
						    <p>{{ item }}</p>
						  </view>
						</view> -->
        <!-- <view class="goods-grey-text">
						  2英寸彩屏，可外放，高品质录音，正负8级变速播放，电子书/ 歌词显示
						</view> -->
      </view>
      <!-- 是排队免单  goodsInfo.is_queue 1 -->
      <view class="price-section" style="position: relative" v-else>
        <image
          style="width: 100%; height: 150rpx"
          :src="asyncImgs.queue.price_bg"
        />
        <view class="pd_position_wrap">
          <view class="pd_price">
            <text style="font-size: 35rpx">￥</text>
            <text v-if="goodsInfo.price">
              <text>{{ goodsInfo.price.split(".")[0] }}</text>
              .
              <text style="font-size: 34rpx">{{
                goodsInfo.price.split(".")[1]
              }}</text>
            </text>
            <text class="pd_origin_price"
              >￥{{ goodsInfo.original_price }}</text
            >
          </view>
          <view class="return_money_wrap">
            <view class="flex-y-center" style="flex: 1; overflow: hidden">
              <u-icon name="info-circle-fill" size="28" />
              <view style="margin: 0 10rpx 0 10rpx">
                返利比例 {{ Number(goodsInfo.cashback_bili) }}%
              </view>
              <view class=""> 单次返现 {{ goodsInfo.single_price }} 元 </view>
            </view>
            <view class="">
              已售{{
                goodsInfo.sales > 9999
                  ? goodsInfo.sales + "+"
                  : goodsInfo.sales
              }}份
            </view>
          </view>
        </view>
      </view>

      <view class="goods-name" style="padding: 0 4.8%">{{
        goodsInfo.name
      }}</view>
    </template>
    <template v-else>
      <view class="seckill-name">
        <view class="goods-name">{{ goodsInfo.name }}</view>
        <view class="integral-box" v-if="goodsInfo.integral.give">
          赠送{{ goodsInfo.integral.give }}积分
        </view>
        <view class="integral-box" v-if="goodsInfo.confine_count">
          限购{{ goodsInfo.confine_count }}件
        </view>
        <view class="integral-box" v-if="goodsInfo.integral.forehead">
          积分最多抵扣{{ goodsInfo.integral.forehead }}元
        </view>
      </view>
    </template>
    <view class="cutPrice" v-if="activityCutPriceId && cutOrder">
      <view class="progressBar">
        <view
          class="box"
          :style="{
            width: getProgressBarValue + '%'
          }"
        >
          <view class="icon">
            <image :src="asyncImgs.index.cut_price_ico" mode="widthFix" />

            <view class="price" :class="getProgressBarValue > 60 ? 'on' : ''">
              <view>已砍至¥{{ cutOrder.pay_price }}</view>
              <text></text>
            </view>
          </view>
        </view>
      </view>

      <view class="cutPriceFooter">
        <view
          >原价：<text>¥{{ cutOrder.total_price }}</text></view
        >
        <view
          >最低：<text>¥{{ cutOrder.min_price }}</text></view
        >
      </view>
    </view>
    <view class="collect">
      <view class="collectItem" @click="$emit('collect')">
        <i class="iconfont icon-collection" v-if="!goodsInfo.is_favorite"></i>
        <i class="iconfont icon-collection-fill" v-else></i>
        收藏
      </view>
      <!-- 新增2降价提醒 -->
      <view
        class="collectItem"
        @click.once="$emit('goPriceReduction')"
        v-if="!goodsInfo.is_lowering"
      >
        <image
          class="imgStyle"
          src="../../../static/images/jiangjia.png"
          mode=""
        ></image>
        降价提醒
      </view>
      <view class="collectItem" @click.once="$emit('lowering')" v-else>
        <image
          class="imgStyle"
          src="../../../static/images/jiangjia.png"
          mode=""
        ></image>
        已设置提醒
      </view>
      <view class="collectItem" @click="$emit('shareGood')">
        <i class="iconfont icon-share"></i>分享
      </view>
    </view>
  </view>
</template>

<script>
import { diySysPageMixin } from "@/components/diySystemPage/mixins/index.js";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {}
    },
    goodsInfo: {
      type: Object,
      default: {}
    },
    is_pt: {
      type: [String, Boolean],
      default: false
    },
    activityCutPriceId: {
      type: [String, Number],
      default: ""
    },
    cutOrder: {
      type: Object,
      default() {
        return null;
      }
    }
  },
  mixins: [diySysPageMixin],
  components: {},
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    }
  },
  computed: {
    showMemberPrice() {
      return this.propsData.params.showMemberPrice;
    },
    showOriginPrice() {
      return this.propsData.params.showOriginPrice;
    },
    goodsIntroduceCss() {
      if (!this.propsData) return {};
      let style = Object.assign({}, this.propsData.moduleCss);
      if (style.margin) style.margin = `0 0 ${style.margin * 2}rpx 0`;
      if (style.padding) style.padding = `0 ${style.padding * 2}rpx`;
      if (style.borderRadius)
        style["borderRadius"] = `${style.borderRadius * 2}rpx`;
      let obj = {
        margin: style.margin,
        borderRadius: style.borderRadius,
        padding: style.padding,
        position: "relative",
        overflow: "hidden"
      };
      return obj;
    },
    getWidth() {
      return 0;
    },

    // arr[0] 已砍 arr[1] 剩余砍价
    getCurPrice() {
      let arr = [0, 0],
        { cutOrder: data } = this.goodsInfo;

      if (data) {
        if (data.pay_price && data.total_price) {
          arr[0] = parseFloat((data.total_price - data.pay_price).toFixed(2));
        }

        if (data.min_price) {
          arr[1] = parseFloat(
            (data.total_price - data.min_price - parseFloat(arr[0])).toFixed(2)
          );
        }
      }

      return arr;
    },

    getProgressBarValue() {
      if (!this.goodsInfo || !this.cutOrder) return;
      let { getCurPrice } = this,
        total_price = parseFloat(this.cutOrder.total_price),
        min_price = parseFloat(this.cutOrder.min_price);

      return (
        parseFloat((getCurPrice[0] / (total_price - min_price)).toFixed(4)) *
        100
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.promptText {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #f0250e;
  line-height: 0rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
  background-color: #fde6e2;
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  padding: 3rpx 8rpx;
}

.ml15 {
  margin-left: 15rpx;
}

.imgStyle {
  width: 30rpx;
  height: 30rpx;
  margin-right: 15rpx;
}

.goods-introduce {
  width: 100%;
  position: relative;
  font-family: PingFang SC;
  .introduce-section {
    width: 100%;
    padding: 2.67vw 4.8% 0;
    .introduce-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .price-section {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-direction: column;
        .price-box {
          display: flex;
          align-items: baseline;
          .price {
            display: flex;
            align-items: flex-end;
            font-size: 34rpx;
            font-weight: 600;
            color: #f8260a;
            line-height: 50rpx;
            text:nth-child(2) {
              font-size: 56rpx;
              line-height: 62rpx;
            }
          }
          .origin-price {
            font-size: 28rpx;
            font-weight: 600;
            color: #232326;
            margin-left: 16rpx;
            .member-price-img {
              width: 60rpx;
              height: 24rpx;
              margin-left: 6rpx;
            }
          }

          .old-price {
            font-size: 28rpx;
            font-weight: 400;
            color: #8c8c8c;
            margin-left: 20rpx;
            text-decoration: line-through;
          }
        }
      }
      .share-section {
        display: flex;
        flex-direction: column;
        padding-top: 20rpx;
        // justify-content: flex-end;
        // align-items: flex-end;
        .price-bottom-text {
          font-size: 24rpx;
          color: #f8260a;
        }
        .sale-num {
          font-size: 22rpx;
          font-weight: 400;
          color: #8c8c8c;
          margin-bottom: 0;
          display: flex;
          justify-content: flex-end;
        }
      }
    }

    .goods-virtues {
      display: flex;
      align-items: center;
      margin-top: 4rpx;
      .goods-virtues-item {
        display: flex;
        align-items: center;
        span {
          width: 4rpx;
          height: 4rpx;
          border-radius: 50%;
          background-color: #262626;
          display: inline-block;
        }
        p {
          font-size: 24rpx;
          color: #262626;
          margin-bottom: 0;
          margin-left: 1.33px;
          margin-right: 1.6vw;
        }
      }
    }
    .goods-grey-text {
      margin-top: 3.2vw;
      font-size: 24rpx;
      font-weight: 400;
      color: #8c8c8c;
      word-break: break-all;
    }
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}

.integral-box {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #f0250e;
  margin: 0 10rpx 26rpx 0;
  background: linear-gradient(92deg, #ffe4e3 0%, #fce9e1 100%);
  border-radius: 4rpx;
  padding: 2rpx 4rpx;
}

.flex {
  padding-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
}

.share-box {
  width: 19.2vw;
  height: 7.46vw;
  background: #fdf1f0;
  border-radius: 3.73vw 0 0 3.73vw;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-top: 1.86vw;
  .iconfont {
    font-size: 38rpx;
    color: #f8260a;
  }
  span {
    font-size: 24rpx;
    color: #262626;
    margin-left: 4rpx;
  }
}

.goods-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #262626;
  word-break: break-all;
}

.seckill-name {
  position: relative;
  background: #fff;
  padding: 24rpx;
  .integral-box {
    display: inline-block;
  }

  .share-box {
    position: absolute;
    right: 0;
    top: 0;
  }
}

.levelBox {
  position: relative;
  margin: 20rpx 0;
}

.levelBg {
  display: block;
  width: 100%;
}

.levelBoxCon {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26rpx 14rpx;
  width: 100%;
  height: 100%;

  .num {
    font-size: 24rpx;
    color: #4f322a;
    font-weight: bold;
  }

  .num1 {
    font-weight: normal;
    padding-left: 20rpx;
  }

  .let {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;

    image {
      margin-right: 10rpx;
      width: 28rpx;
    }
  }

  .rig {
    display: flex;
    align-items: center;
    image {
      margin-left: 12rpx;
      width: 12rpx;
    }
  }
}

.pt-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 130rpx;
  padding: 0 24rpx;
  .font-w-600 {
    font-weight: 600;
  }
  .font-w-400 {
    font-weight: 400;
  }
  .font-del {
    text-decoration: line-through;
  }
  .price {
    color: #fff;
    font-weight: 600;
  }
  .sales-num {
    line-height: 84rpx;
    font-size: 24rpx;
    color: #ffffff;
  }
}

.progressBar {
  position: relative;
  height: 24rpx;
  background: #ffe5e2;
  border-radius: 14rpx;

  .box {
    position: relative;
    height: 100%;
    background: linear-gradient(90deg, #f1280f 0%, #ff7031 100%);
    border-radius: 14rpx;

    .icon {
      position: absolute;
      right: -25rpx;
      top: -7rpx;

      image {
        display: block;
        width: 36rpx;
        height: 36rpx;
        border-radius: 32px;
      }
    }
  }

  .price {
    position: absolute;
    left: 16rpx;
    bottom: 100%;
    margin-bottom: 16rpx;
    padding: 0 14rpx;
    background: #ffe9e8;
    height: 46rpx;
    line-height: 46rpx;
    font-size: 24rpx;
    color: #ff4a35;
    font-weight: bold;
    border-radius: 12rpx 24rpx 24rpx 0px;
    white-space: nowrap;

    text {
      position: absolute;
      left: 0;
      top: 100%;
      border-top: 9rpx solid #ffe9e8;
      border-right: 16rpx solid transparent;
    }

    &.on {
      right: 0rpx;
      left: auto;
      border-radius: 24rpx 12rpx 0px 24rpx;

      text {
        left: auto;
        right: 0;
      }
    }
  }
}

.cutPrice {
  padding: 80rpx 5% 24rpx;
}

.cutPriceFooter {
  padding-top: 16rpx;
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;

  text {
    font-weight: bold;
    color: #f0250e;
  }
}

.collect {
  display: flex;
  background: #fff;
}
.pd_position_wrap {
  position: absolute;
  top: 0;
  // margin-left: 20rpx;
  padding: 0 20rpx;
  left: 0;
  right: 0;
  width: 100%;
  color: #fff;
  font-size: 24rpx;
  .pd_price {
    font-size: 46rpx;
    margin: 20rpx 0;
    .pd_origin_price {
      margin-left: 10rpx;
      font-size: 28rpx;
      text-decoration: line-through;
    }
  }
  .return_money_wrap {
    display: flex;
    align-items: center;
  }
}
.collectItem {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0;
  height: 84rpx;
  line-height: 1;
  background: none;
  font-size: 24rpx;
  color: #8c8c8c;

  &::after {
    display: none;
  }

  .iconfont {
    margin-right: 10rpx;
    font-size: 40rpx;
  }

  .icon-collection,
  .icon-collection-fill {
    position: relative;
    top: -2rpx;
  }

  .icon-collection-fill {
    color: #f0250e;
  }
}
</style>
